<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <style>
        .layui-textarea{
            min-height: unset;
        }
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block{
            margin-left: 130px;
        }
        .layui-elem-field {
            border-color: #006865;
        }
        .layui-elem-field legend{
            font-size: 15px;
            color: #006865;
            font-weight: bold;
        }
        .mainBox{
            overflow: hidden;
        }
        /*.xm-select-parent .xm-form-select dl{
            max-height: 210px;
        }*/

    </style>
</head>
<body>
<form class="layui-form" action="" >
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-row layui-col-space1" style="padding-right: 30px">
                <div class="layui-col-md12">
                    <input type="hidden" name="id" id="taskid" value="${task.id!}">
                    <input type="hidden" name="delFlag" value="${task.DEL_FLAG!}">
                    <input type="hidden" name="status" value="${task.STATUS!}">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>计划信息</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-col-xs12">
                            <label class="layui-form-label required">工作内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" name="jobContent" autocomplete="off" maxlength="500" lay-verify="content" class="layui-textarea">${task.JOB_CONTENT!}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">作业地点</label>
                            <div class="layui-input-block">
                                <input type="text" name="operationLocation" lay-verify="required" maxlength="100" placeholder=""  autocomplete="off"
                                       class="layui-input" value="${task.OPERATION_LOCATION!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label">工作地点坐标</label>
                            <div class="layui-input-block">
                                <input type="text" name="coordinate" id="coordinate" lay-verify="required"  placeholder=""  autocomplete="off"
                                       class="layui-input" value="${task.COORDINATE!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">工作性质</label>
                            <div class="layui-input-block">
                                <select name="workingType" id="zzxz" lay-verify="required" lay-search="" autocomplete="off">
                                    <option value="" selected>请选择</option>
                                    @for(item in gzxzList!){
                                    <option value="${item.id}" ${item.id==(task.WORKING_TYPE!)?'selected':''}>${item.name!}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">工作开始时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="startTime" id="starttime" lay-verify="datetime" placeholder="请选择"  autocomplete="off"
                                       class="layui-input" value="${task.START_TIME!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">工作结束时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="endTime" id="endtime" lay-verify="datetime" placeholder="请选择"  autocomplete="off"
                                       class="layui-input" value="${task.END_TIME!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">工作单位</label>
                            <div class="layui-input-block">
                                <input type="text" name="constructionManagementUnit" lay-verify="required" placeholder=""  autocomplete="off"
                                       class="layui-input" value="${task.CONSTRUCTION_MANAGEMENT_UNIT!}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">作业风险等级</label>
                            <div class="layui-input-block">
                                <select name="operationalRiskLevel" id="taskzyfxdj" lay-verify="required"lay-search=""  autocomplete="off">
                                    <option value="" selected>请选择</option>
                                    @for(item in zyfxdjList!){
                                    <option value="${item.id}" ${item.id==(task.OPERATIONAL_RISK_LEVEL!)?'selected':''}>${item.name!}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">电网风险等级</label>
                            <div class="layui-input-block">
                                <select name="powerRiskLevel" id="taskdwfxdj" lay-verify="required" lay-search=""  autocomplete="off">
                                    <option value="" selected>请选择</option>
                                    @for(item in dwfxdjList!){
                                    <option value="${item.id}" ${item.id==(task.POWER_RISK_LEVEL!)?'selected':''}>${item.name!}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">是否停电</label>
                            <div class="layui-input-block">
                                <input type="radio" name="isElectrified" value="1" title="是" if(${(task.IS_ELECTRIFIED!)}==''){ checked } ${(task.IS_ELECTRIFIED!)=='1'?'checked':''}>
                                <input type="radio" name="isElectrified" value="0" title="否" ${(task.IS_ELECTRIFIED!)=='0'?'checked':''}>
                                <input type="hidden" value="${task.IS_ELECTRIFIED!}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">电压等级</label>
                            <div class="layui-input-block">
                                <select name="voltageLevel" id="taskdydj" lay-verify="required" lay-search=""  autocomplete="off">
                                    <option value="" selected>请选择</option>
                                    @for(item in dydjList!){
                                    <option value="${item.id}" ${item.id==(task.VOLTAGE_LEVEL!)?'selected':''}>${item.name!}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">施工单位</label>
                            <div class="layui-input-block">
                                <!--<select name="constructionUnit" lay-verify="required" lay-search="" lay-filter="sgdw-select"  autocomplete="off">
                                    <option value="" selected>请选择</option>
                                    @for(item in dwList!){
                                    <option value="${item.id}" ${item.id==(task.CONSTRUCTION_UNIT!)?'selected':''}>${item.name!}</option>
                                    @}
                                </select>-->
                                <select name="constructionUnit" id="constructionUnit" xm-select="constructionUnit" xm-select-search="" xm-select-search-type="dl" xm-select-show-count="1" lay-verify="required" xm-select-skin="primary">

                                </select>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required">作业设备</label>
                            <div class="layui-input-block">
                                <select name="zysbjk" id="zysbjk" xm-select="zysbjk" xm-select-search="" xm-select-search-type="dl" xm-select-show-count="1" lay-verify="required|cameraCheck" xm-select-skin="primary">

                                </select>
                            </div>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>人员信息</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-col-xs8">
                            <label class="layui-form-label required">作业人员</label>
                            <div class="layui-input-block">
                                <select name="zyryid" id="zyry" xm-select-search="" xm-select-search-type="dl" class="ry" xm-select="zyry" lay-verify="required" lay-filter="required" xm-select-skin="primary">

                                </select>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label required" style="width: 120px">作业总人数</label>
                            <div class="layui-input-block" style="margin-left: 150px">
                                <input type="text" name="peopleNum" placeholder=""  autocomplete="off"
                                       class="layui-input" readonly value="${task.PEOPLE_NUM!}" style="background-color: whitesmoke">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs8">
                            <label class="layui-form-label">安全监护人</label>
                            <div class="layui-input-block">
                                <select name="safetyChargePersonId" class="ry" xm-select="aqjdr" xm-select-search="" xm-select-search-type="dl" xm-select-radio xm-select-skin="primary">

                                </select>
                                <input type="hidden" name="safetyChargePerson" value="${task.SAFETY_CHARGE_PERSON!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width: 120px">安全监护人手机号</label>
                            <div class="layui-input-block" style="margin-left: 150px">
                                <input type="text" name="safetyChargePersonPhone" lay-verify=""  placeholder=""  autocomplete="off"
                                       class="layui-input" value="${task.SAFETY_CHARGE_PERSON_PHONE!}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs8">
                            <label class="layui-form-label">专责监护人</label>
                            <div class="layui-input-block">
                                <select name="speicalId" class="ry" xm-select="zzjhr" xm-select-search="" xm-select-search-type="dl" xm-select-radio  xm-select-skin="primary">

                                </select>
                                <input type="hidden" name="speicalPerson" value="${task.SPEICAL_PERSON!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width: 120px">专责监护人手机号</label>
                            <div class="layui-input-block" style="margin-left: 150px">
                                <input type="text" name="speicalPersonPhone" lay-verify=""  placeholder=""  autocomplete="off"
                                       class="layui-input" value="${task.SPEICAL_PERSON_PHONE!}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs8">
                            <label class="layui-form-label required">工作负责人</label>
                            <div class="layui-input-block">
                                <select name="operationChargePersonId" class="ry" xm-select="gzfzr" xm-select-search="" xm-select-search-type="dl" xm-select-radio  lay-verify="required" xm-select-skin="primary">

                                </select>
                                <input type="hidden" name="operationChargePerson" value="${task.OPERATION_CHARGE_PERSON!}">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width: 120px">工作负责人手机号</label>
                            <div class="layui-input-block" style="margin-left: 150px">
                                <input type="text" name="operationChargePersonPhone" lay-verify=""  placeholder=""  autocomplete="off"
                                       class="layui-input" value="${task.OPERATION_CHARGE_PERSON_PHONE!}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-md">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>

</form>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'select', 'code', 'element','laydate'], function () {
        
        let form = layui.form;
        let $ = layui.jquery;
        let VIEW_PATH = "${ctxPath}/busOperationplan/view/";
        let DATA_PATH = "${ctxPath}/busOperationplan/data/";
        let select = layui.select;
        let laydate = layui.laydate;

        if ('${type}'==='3'){
            $(".bottom").css("display","none");
        }
        layui.code();
        laydate.render({
            elem: '#starttime',
            type: 'datetime'
        });

        //格式化结束时间、页面重新渲染，否则无效果
        function dateTime(){
            laydate.render({
                elem: '#endtime',
                type: 'datetime',
                done: function (value, date, endDate){
                    refreshTime(value);
                }
            });

            function refreshTime(value){
                var endtime=value.replace("00:00:00","23:59:59");
                var html='<input type="text" name="endTime" id="endtime" lay-verify="datetime" placeholder="请选择"  autocomplete="off" class="layui-input" value="'+endtime+'" lay-key="2">';
                $("#endtime").parent().html(html);
                dateTime();
            }
        }

        dateTime();

        form.on('submit(user-save)', function (data) {
            /*layer.msg("保存成功", {icon: 1, time: 1000}, function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                parent.layui.table.reload("task-table");
            });*/
            $.ajax({
                url: DATA_PATH + 'saveOrUpdate',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg("保存成功", {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("task-table");
                        });
                    } else {
                        layer.msg("保存失败", {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        form.verify({
            cameraCheck:function(value){
                let data;
                let starttime = $("#starttime").val();
                let endtime = $("#endtime").val();
                let taskid = $("#taskid").val();
                $.ajax({
                    url: DATA_PATH + 'cameraCheck',
                    data: {
                        'cameraid': value,
                        'startTime': starttime,
                        'endTime': endtime,
                        'operationid': taskid
                    },
                    dataType:'json',
                    contentType:'application/json',
                    type:'get',
                    async: false,
                    success:function(result){
                        if(result&&result.data&&result.data.length>0){
                            data=true;
                        }
                    }
                });
                if(data){
                    return '监控设备已被占用，请更换设备';
                }
            }
        });

        var Zysb=new Array();
        @for(item in taskZysb!){
            Zysb.push('${item.camera_num}');
        @}
        var Zyry=new Array();
        @for(item in taskZyry!){
            Zyry.push('${item.person_id}');
        @}
        var Sgdw=new Array();
        @for(item in taskSgdw!){
            Sgdw.push('${item.unit}');
        @}
        var aqfzr=new Array();
        aqfzr.push('${task.SAFETY_CHARGE_PERSON_ID!}')
        var zzjhr=new Array();
        zzjhr.push('${task.SPEICAL_ID!}')
        var gzfzr=new Array();
        gzfzr.push('${task.OPERATION_CHARGE_PERSON_ID!}');


        /*人员多选下拉绑定 Start*/
        select.config('zyry',{
            type: 'get',
            header: {},
            data:{},
            direction: 'up',
            success:function () {
                select.value('zyry',Zyry);
            }
        })
        select.config('zysbjk',{
            type: 'get',
            header: {},
            data:{},
            success:function () {
                select.value('zysbjk',Zysb);
            }
        })
        select.config('constructionUnit',{
            type: 'get',
            header: {},
            data:{},
            success:function () {
                select.value('constructionUnit',Sgdw);
            }
        })
        select.config('aqjdr',{
            type: 'get',
            header: {},
            data:{},
            direction: 'up',
            success:function () {
                select.value('aqjdr',aqfzr);
            }
        })
        select.config('zzjhr',{
            type: 'get',
            header: {},
            data:{},
            direction: 'up',
            success:function () {
                select.value('zzjhr',zzjhr);
            }
        })
        select.config('gzfzr',{
            type: 'get',
            header: {},
            data:{},
            direction: 'up',
            success:function () {
                select.value('gzfzr',gzfzr);
            }
        })



        select.data('zysbjk','server',{
            url: '${ctxPath}/dict/loadCamera'
            ,keyword:'方案名称'
        })
        select.data('constructionUnit','server',{
            url: '${ctxPath}/dict/loadDw2'
            ,keyword:'施工单位'
        })
        select.data('zyry','server',{
            url: '${ctxPath}/dict/loadZyry?unit='+Sgdw
            ,keyword:'作业人员'
        })
        select.data('aqjdr','server',{
            url: '${ctxPath}/dict/loadZyry?unit='+Sgdw
            ,keyword:'安全监护人'
        })
        select.data('zzjhr','server',{
            url: '${ctxPath}/dict/loadZyry?unit='+Sgdw
            ,keyword:'专责监护人'
        })
        select.data('gzfzr','server',{
            url: '${ctxPath}/dict/loadZyry?unit='+Sgdw
            ,keyword:'工作负责人'
        })

        /**
         * 监听选择
         * */
        select.on('zyry',function (id,val) {
            var count=val.length;
            $("[name='peopleNum']").val(count);
        },true);
        select.on('aqjdr',function (id,vals,val) {
            if (vals.length>0){
                var text=val.name;
                $("[name='safetyChargePerson']").val(text);
            }
        },true);
        select.on('zzjhr',function (id,vals,val) {
            if (vals.length>0){
                var text=val.name;
                $("[name='speicalPerson']").val(text);
            }
        },true);
        select.on('gzfzr',function (id,vals,val) {
            if (vals.length>0){
                var text=val.name;
                $("[name='operationChargePerson']").val(text);
            }
        },true);
        select.on('constructionUnit',function (id,vals,val) {
             console.log(id,vals,val);
            var unit=[];
            for (item in vals){
                unit.push(vals[item].value);
            }

            select.data('zyry','server',{
                url: '${ctxPath}/dict/loadZyry?unit='+unit
                ,keyword:'作业人员'
            })
            select.data('aqjdr','server',{
                url: '${ctxPath}/dict/loadZyry?unit='+unit
                ,keyword:'安全监护人'
            })
            select.data('zzjhr','server',{
                url: '${ctxPath}/dict/loadZyry?unit='+unit
                ,keyword:'专责监护人'
            })
            select.data('gzfzr','server',{
                url: '${ctxPath}/dict/loadZyry?unit='+unit
                ,keyword:'工作负责人'
            })
        },true);



        window.setCoordinate = function (param) {
            console.log("调用成功");
            $("#coordinate").val(param);
        }

        $(document).on('click','#coordinate',function(){
            parent.layer.open({
                type: 2,
                title: '选择坐标',
                shade: 0.1,
                shadeClose: true,
                area: ['1100px','650px'],
                content: VIEW_PATH + 'selectGis'
            });
        })
    });
</script>
</body>
</html>